import { history } from 'umi'
import { useState, useRef } from 'react'
import { SearchBar, DotLoading, InfiniteScroll, Empty, Popover } from 'antd-mobile'
import { observer, useLocalObservable } from 'mobx-react'
import NavBar from '@/components/Global/NavBar'
import styles from './index.module.less'
import { SearchOutline, UpOutline } from 'antd-mobile-icons'
import arrowRight from '@/static/trainPlan/arrow_right.png'
import dayjs from 'dayjs'
import Store from './store'
import type { PopoverRef } from 'antd-mobile/es/components/popover'
import Box from '@/components/Common/Box'

type SearchFields = 'title' | 'document_code'

export default observer(() => {
    const DROPDOWN_MAP: Record<SearchFields, string> = {
        title: '标题',
        document_code: '文号',
    }
    const [type, setType] = useState<SearchFields>('title')
    const [value, setValue] = useState<string>('')
    const [visible, setVisible] = useState<boolean>(false)

    const { noticeList, setParams, resetParams, listParams, hasMore } = useLocalObservable(
        () => new Store(),
    )
    const popoverRef = useRef<PopoverRef>(null)

    async function loadMore() {
        setParams({
            page: listParams.page + 1,
        })
    }

    const formatterDate = (date: string) => {
        if (date) {
            return dayjs(date).format('YYYY-MM-DD')
        } else {
            return ''
        }
    }
    const goDetail = (id: number) => {
        history.push({ pathname: '/notice/detail', query: { id: String(id) } })
    }

    const onSearch = () => {
        const params = {
            [type]: value,
            search: true,
            page: 1,
        }
        setParams(params)
    }

    return (
        <div className={styles.page}>
            <NavBar title={'通知公告'} />
            <div className={styles.searchView}>
                <Popover
                    content={
                        <>
                            {Object.keys(DROPDOWN_MAP).map(item => {
                                return (
                                    <div
                                        key={item}
                                        style={{ padding: '12px 32px' }}
                                        onClick={() => {
                                            setType(item as SearchFields)
                                            popoverRef.current?.hide()
                                        }}
                                    >
                                        {DROPDOWN_MAP[item as SearchFields]}
                                    </div>
                                )
                            })}
                        </>
                    }
                    trigger="click"
                    onVisibleChange={setVisible}
                    placement="bottom-start"
                    ref={popoverRef}
                >
                    <div
                        className={styles.popoverView}
                        onClick={() => {
                            popoverRef.current?.show()
                        }}
                    >
                        <span className={styles.drownTitle}>{DROPDOWN_MAP[type]}</span>
                        <UpOutline
                            className={visible ? styles.upIcon : styles.downIcon}
                            fontSize={12}
                            color="#333"
                        />
                        <div className={styles.line} />
                    </div>
                </Popover>
                <SearchBar
                    placeholder="请输入要搜索的内容"
                    clearable={false}
                    className={styles.searchBarView}
                    style={{ '--height': '33px' }}
                    showCancelButton
                    value={value}
                    onChange={setValue}
                    icon={<SearchOutline className={styles.searchIcon} />}
                    onSearch={onSearch}
                    onCancel={resetParams}
                />
            </div>

            {noticeList.length > 0 ? (
                <>
                    <div className={styles.content}>
                        <div className={styles.list}>
                            {noticeList.map(item => (
                                <Box
                                    key={item.id}
                                    title={item.title}
                                    onClick={() => goDetail(item.id)}
                                >
                                    <div className={styles.list_item}>
                                        <div>
                                            <div>文号： {item.document_code}</div>
                                            <div>
                                                {`${item.create_user_name} · ${formatterDate(
                                                    item.publish_time,
                                                )}`}
                                            </div>
                                        </div>
                                        <img src={arrowRight} />
                                    </div>
                                </Box>
                            ))}
                        </div>
                        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                            {hasMore ? (
                                <>
                                    <span>Loading</span>
                                    <DotLoading />
                                </>
                            ) : (
                                <span>~ 人家也是有底的 ~</span>
                            )}
                        </InfiniteScroll>
                    </div>
                </>
            ) : (
                <Empty description="暂无数据" />
            )}
        </div>
    )
})
